<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="" lay-filter="search">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">年份</label>
                            <div class="layui-input-inline">
                                <input type="text" name="year" autocomplete="off" class="layui-input" id="year">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">类型</label>
                            <div class="layui-input-inline">
                                <select name="type" lay-verify="" id="type">
                                    <option value="0">个人</option>
                                    <option value="1">家庭</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <div class="layui-row layui-col-space15" style="margin-top: 10px">
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header"><i class="fa fa-line-chart icon"></i>今年统计</div>
                    <div class="layui-card-body">
                        <div id="this-year" style="width: 100%;min-height:500px"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header"><i class="fa fa-line-chart icon"></i>近五年趋势</div>
                    <div class="layui-card-body">
                        <div id="recent" style="width: 100%;min-height:500px"></div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<script>
    layui.use(['form', 'laydate','miniPage', 'axios','echarts','layer'], function () {
        var $ = layui.jquery,
            form = layui.form,
            laydate = layui.laydate,
            echarts = layui.echarts,
            layer = layui.layer,
            axios = layui.axios,
            miniPage = layui.miniPage;

        laydate.render({
            elem: '#year',
            type: 'year'
        })

        form.render(null, 'search');

        //渲染今年的情况
        var chartDom = document.getElementById('this-year');
        var year = echarts.init(chartDom);
        var option;
        option = {
            title: {
                text: "各项统计"
            },
            series : [
                {
                    name: '大类统计',
                    type: 'pie',
                    radius: '50%',
                    roseType: 'angle',
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                formatter: '{b}:{c}￥ ({d}%)'
                            }
                        },
                        // 阴影的大小
                        shadowBlur: 200,
                        // 阴影水平方向上的偏移
                        shadowOffsetX: 0,
                        // 阴影垂直方向上的偏移
                        shadowOffsetY: 0,
                        // 阴影颜色
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                    data:[]
                }
            ]

        };
        option && year.setOption(option);

        //获取最近5年的时间
        let arr = []
        let date = new Date()
        let elem = date.getFullYear()
        arr[4] = elem

        for (let i = 3; i >= 0; i--){
            elem = elem - 1;
            console.log(elem)
            arr[i] = elem;
        }

        var recentFiveYear = echarts.init(document.getElementById('recent'), 'walden');
        var optionRecords = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['支出', '收入', '投资', '借贷']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                name: '年份',
                boundaryGap: false,
                data: arr
            },
            yAxis: {
                type: 'value',
                name: '金额(￥)',
                // axisLabel: {
                //     formatter: '{value} ￥'
                // }
            }
        };
        recentFiveYear.setOption(optionRecords);

        //data包含两个属性：year(查询的年份), type(查询的类型，0代表个人， 1代表家庭)
        function init(data){
            //请求个人当前年份的统计
            axios({
                url: 'statistic/byYear',
                method: 'post',
                data: data
            }).then(response => {
                if (response.code == 0){
                    console.log(response.data)
                    let option = {
                        series : [
                            {
                                data: response.data
                            }
                        ]
                    }

                    year.setOption(option);
                }
            }).catch(error => {
                console.log(error)
            })

            //请求最近五年的数据统计
            data.year = new Date().getFullYear();
            axios({
                url: 'statistic/recentFiveYear',
                method: 'post',
                data: data
            }).then(response => {
                if (response.code == 0){
                    let newOption = {
                        series : [
                            {
                                name: '支出',
                                type: 'line',
                                data: response.data.payData
                            },
                            {
                                name: '收入',
                                type: 'line',
                                data: response.data.incomeData
                            },
                            {
                                name: '投资',
                                type: 'line',
                                data: response.data.investData
                            },
                            {
                                name: '借贷',
                                type: 'line',
                                data: response.data.loanData
                            }
                        ]
                    }
                    recentFiveYear.setOption(newOption);
                }else{
                    layer.msg("加载资产信息失败");
                }
            }).catch(error => {
            })
        }

        let initData = {
            year : new Date().getFullYear(),
            type: 1
        }

        form.val('search', {
            year: initData.year,
            type: initData.type
        })

        form.render(null, 'search');

        init(initData);
        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            init(data.field)
            return false;
        });






    });
</script>